<template>
  <div id="task_list_body">
    <HeaderImg title="任务"></HeaderImg>
    <div class="task_list_content">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-collapse">
          <a class="mui-navigate-right">我发布的任务</a>
          <span class="group-friend-num">{{ myCreateTaskList.length }}</span>
          <div class="mui-collapse-content">
            <ul class="mui-table-view task-list">
              <li
                v-for="myCreateTaskItem in myCreateTaskList"
                class="mui-table-view-cell mui-media task-item"
              >
                <a
                  @click="toTaskData(myCreateTaskItem.task_id)"
                  :class="myCreateTaskItem.task_status == 2  ? 'mui-navigate-right task-complete' : 'mui-navigate-right task-exceed'"
                >
                  <div class="mui-media-body">
                    {{ myCreateTaskItem.task_title}}
                    <div class="task-status-panel">
                      <span>进度：</span>
                      <Progress :progress="myCreateTaskItem.task_progress"></Progress>
                    </div>
                    <div class="task-people">
                      <span class="task-first-party">
                        受派人：
                        <span>{{ myCreateTaskItem.real_name}}</span>
                      </span>
                    </div>
                    <div class="task-time">
                      <span class="task-release-time">{{ myCreateTaskItem.start_time}}</span>
                      <span class="task-time-ponit">→</span>
                      <span class="task-end-time">{{ myCreateTaskItem.end_time}}</span>
                    </div>
                  </div>
                  <div
                    class="task-chapter-mask"
                    :style="myCreateTaskItem.task_status == 1 ? 'display:none' : ''"
                  >已完成</div>
                </a>
              </li>
            </ul>
          </div>
        </li>

        <li class="mui-table-view-cell mui-collapse">
          <a class="mui-navigate-right">所有任务</a>
          <span class="group-friend-num">{{ MyTaskLisk.length }}</span>
          <div class="mui-collapse-content">
            <ul class="mui-table-view task-list">
              <li
                v-for="myAllTaskItem in MyTaskLisk"
                class="mui-table-view-cell mui-media task-item"
              >
                <a
                  @click="toTaskData(myAllTaskItem.task_id)"
                  :class="myAllTaskItem.task_status == 2  ? 'mui-navigate-right task-complete' : 'mui-navigate-right task-exceed'"
                >
                  <div class="mui-media-body">
                    {{ myAllTaskItem.task_title}}
                    <div class="task-status-panel">
                      <span>进度：</span>
                      <Progress :progress="myAllTaskItem.task_progress"></Progress>
                    </div>
                    <div class="task-people">
                      <span class="task-first-party">
                        受派人：
                        <span>{{ myAllTaskItem.real_name}}</span>
                      </span>
                    </div>
                    <div class="task-time">
                      <span class="task-release-time">{{ myAllTaskItem.start_time}}</span>
                      <span class="task-time-ponit">→</span>
                      <span class="task-end-time">{{ myAllTaskItem.end_time}}</span>
                    </div>
                  </div>
                  <div
                    class="task-chapter-mask"
                    :style="myAllTaskItem.task_status == 1 ? 'display:none' : ''"
                  >已完成</div>
                </a>
              </li>

              <!-- 
              <li class="mui-table-view-cell mui-media task-item">
                <a class="mui-navigate-right task-exceed">
                  <div class="mui-media-body">
                    添加好友接口
                    <div class="task-status-panel">
                      <span>进度：</span>
                      <Progress progress="80"></Progress>
                    </div>
                    <div class="task-people">
                      <span class="task-first-party">
                        指派人：
                        <span>杨鸿</span>
                      </span>
                    </div>
                    <div class="task-time">
                      <span class="task-release-time">10-18</span>
                      <span class="task-time-ponit">→</span>
                      <span class="task-end-time">12-26</span>
                    </div>
                  </div>
                  <div class="task-chapter-mask">已逾期</div>
                </a>
              </li>-->
            </ul>
          </div>
        </li>
        <li class="mui-table-view-cell mui-collapse">
          <a class="mui-navigate-right">待完成任务</a>
          <span class="group-friend-num">0</span>
          <div class="mui-collapse-content">
            <ul class="mui-table-view"></ul>
          </div>
        </li>
      </ul>
    </div>
    <footerNav active="2"></footerNav>
  </div>
</template>
<script>
import $ from "jquery";
import Vue from "vue";
import { Progress } from "vant";

Vue.use(Progress);
import { getMyTask } from "../assets/js/TaskApi";
export default {
  data() {
    return {
      releaseTaskList: {},
      MyTaskLisk: {},
      myCreateTaskList: {}
    };
  },
  methods: {
    initMyTask: function() {
      this.$axios.post(this.$api.task.getMyTask).then(res => {
        this.MyTaskLisk = res.data.data;
      });
    },
    initMyCreateTask: function() {
      this.$axios.post(this.$api.task.getMyCreateTask).then(res => {
        this.myCreateTaskList = res.data.data;
      });
    },
    toTaskData: function(task_id) {
      this.$router.push({
        path: "TaskData",
        query: {
          task_id: task_id
        }
      });
    }
  },
  created() {
    this.initMyTask();
    this.initMyCreateTask();
    $(function() {
      $("#task_list_body").on("click", "a.mui-navigate-right", function() {
        $(this)
          .parent()
          .toggleClass("mui-active");
      });
    });
  }
};
</script>
<style>
#task_list_body .van-progress {
  overflow: auto;
}
#task_list_body .mui-collapse-content {
  overflow: auto;
}
.view {
  position: absolute;
}
.task-list {
  font-size: 16px;
  color: #888888;
}
.task-status-panel {
  display: flex;
  flex-wrap: nowrap;
  height: 30px;
  line-height: 30px;
  position: relative;
}
.task-item {
  position: relative;
}
.task-people {
  position: absolute;
  left: 160px;
  bottom: 15px;
  font-size: 14px;
}
.task-item .mui-navigate-right {
  position: relative;
}
.task-item .task-complete .task-chapter-mask {
  display: block;
}
.task-item .task-complete .ts-progress-mask {
  background-color: #5fb878;
}
.task-item .task-exceed .ts-progress-mask {
  background-color: #888888;
}
.task-item .task-exceed .task-chapter-mask {
  display: block;
  color: red;
  border: 2px dashed red;
}

.task-chapter-mask {
  color: #5fb878;
  width: 80px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 2px dashed #5fb878;
  border-radius: 3px;
  transform: rotate(30deg);
  position: absolute;
  top: 15px;
  left: 40px;
  display: none;
}
.task-time {
  position: absolute;
  top: 12px;
  left: 160px;
  height: 20px;
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
}

.task-first-party {
  height: 20px;
}
.task-time span {
  display: block;
  height: 20px;
  margin-right: 10px;
}
.task-time span.task-release-time {
  color: #007aff;
}
.task-time span.task-end-time {
  color: red;
}
.task-time .task-time-ponit {
  line-height: 18px;
}

.task-people .task-first-party {
  color: #007aff;
}
.task-people .task-first-party span {
  display: block;
  float: right;
  width: 45px;
  color: rgb(238, 0, 0);
}
</style>